<template>
    <div>
      <el-row :gutter="10">
        <el-col :span="16" >
          <el-tag>线索ID:{{id}}</el-tag>
          <el-descriptions class="margin-top" title="带边框列表" border>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                创建时间
              </template>
              {{form.createTime}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                手机号
              </template>
              {{form.phone}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-location-outline"></i>
                渠道来源
              </template>
              苏州市
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i>
                线索归属
              </template>
              <el-tag size="small">{{form.owner}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                活动信息
              </template>
              江苏省苏州市吴中区吴中大道 1188 号
            </el-descriptions-item>
          </el-descriptions>
          <el-row type="flex" justify="end">
            <el-col :span="6">
          <el-button v-if="(form.status==1 ||form.status==2) && form.falseCount<3" size="mini" type="danger" @click="handleFalseClue">伪线索</el-button>
          <el-button v-if="form.status==1 ||form.status==2" size="mini" type="success" @click="handleTransform">转商机</el-button>
            </el-col>
          </el-row>
          <el-tag>更新线索</el-tag>
          <el-form ref="form" :disabled="disabled" :model="form" :rules="rules" label-width="110px">
            <el-row :gutter="5">
              <el-col :span="12">
                <el-form-item label="客户姓名" prop="name">
                  <el-input v-model="form.name" type="textarea" placeholder="请输入客户姓名" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="性别" prop="sex">
                  <el-select placeholder="请输入性别" clearable v-model="form.sex">
                    <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="5">
              <el-col :span="12">
                <el-form-item label="年龄" prop="age">
                  <el-input type="number" v-model="form.age" placeholder="请输入年龄" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="微信号" prop="weixin">
                  <el-input v-model="form.weixin"  placeholder="请输入微信号" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="5">
              <el-col :span="12">
                <el-form-item label="qq号" prop="qq">
                  <el-input v-model="form.qq" placeholder="请输入qq号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="意向等级" prop="level">
                  <el-select placeholder="请输入意向等级" clearable v-model="form.level">
                    <el-option v-for="item in dict.type.clues_level" :label="item.label" :value="item.value" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="5">
              <el-col :span="12">
                <el-form-item label="意向学科" prop="subject">
                  <el-select placeholder="请输入意向学科" clearable v-model="form.subject">
                    <el-option v-for="item in dict.type.course_subject" :label="item.label" :value="item.value" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="跟进记录" prop="type">
                  <el-input v-model="form.record" placeholder="请输入跟进记录" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="5">
              <el-col :span="12">
                <el-form-item label="下次跟进时间" prop="nextTime">
                  <el-date-picker
                    v-model="form.nextTime"
                    type="date"
                    placeholder="下次跟进时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :offset="16">
                <el-form-item>
                  <el-button v-if="(form.status==1 ||form.status==2)&& !disabled" type="primary" @click="submitForm">保存</el-button>
                  <el-button type="primary" @click="$emit('cancel')">取消</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
        <el-col :span="8">
          <track-list :id="id" :key="trackListKey"></track-list>
        </el-col>
      </el-row>
      <false-clue ref="falseClueDialog" @success="trackListKey++"></false-clue>
    </div>
</template>

<script>
  import {getClue} from '@/api/crm/clue'
  import {addClueTrack,transform2Business} from "@/api/crm/clueTrack";
  import TrackList from "@/views/crm/clue/components/track-list"
  import FalseClue from "@/views/crm/clue/components/false-clue"

  export default {
    name: "track-index",

    props: {
      clueId: {
        type: [String, Number],
      },
      view:{type:[Boolean]},
    },
    components: {TrackList, FalseClue},
    dicts: ['sys_user_sex', 'clues_level', 'course_subject'],
    data() {
      return {
        id: this.clueId,
        form: {},
        rules: {},
        trackListKey: 0,
        disabled:false,
      }
    },

    watch: {
      clueId(newValue, oldValue) {
        this.id = newValue
        this.getList()
      },
      view:{
        handler: function (newValue,oldValue){
          this.disabled=newValue
        },
        immediate:true
      },
    },

    created() {
      this.getList()
    },
    methods: {
      handleTransform() {
        this.$msgbox.confirm(`确定转换线索${this.id}到商机吗`).then(() => {
          transform2Business({id: this.id, record: '转商机'}).then(resp => {
            this.handleSuccess()
          })
        })
      },
      getList() {
        getClue(this.id).then(resp => {
          this.form = resp.data;
        })
        this.trackListKey++;
      },
      submitForm() {
        addClueTrack(this.form).then(resp => {
          this.$message.success('操作成功')
          this.getList();
          this.$emit('success')
        })
      },
      handleFalseClue() {
        this.$refs.falseClueDialog.open = true
        this.$refs.falseClueDialog.id = this.id
        this.$refs.falseClueDialog.resetForm();
      },
      handleSuccess() {
        this.$message.success('操作成功');
        this.getList()
        this.$emit('success')
      }
    }
  }
</script>

<style scoped>

</style>
